import React from "react";
import "./Todofooter.css";
export default function Todofooter(props) {
	let { todo, clearAlltodo, checkedalltodo } = props;

	//清除已完成
	let clear = () => {
		clearAlltodo();
	};

	//全选与取消全选
	let updataall = (e) => {
		checkedalltodo(e.target.checked);
	};
	return (
		<>
			<div className="todo-footer">
				<label>
					<input
						type="checkbox"
						onChange={updataall}
						checked={todo.every((item) => item.done) && todo.length !== 0}
					/>
				</label>
				<span>
					<span>已完成{todo.filter((item) => item.done === true).length}</span>/
					全部{todo.length}
				</span>
				<button className="btn btn-danger" onClick={clear}>
					清除已完成任务
				</button>
			</div>
		</>
	);
}
